<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar :title="`${comment.reply_count}条回复`">
      <van-icon color="#1989fa" slot="left" name="cross" @click="$emit('click-close')"/>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <comment-item :comment="comment"/>
    <!-- /当前评论项 -->

    <van-cell title="所有回复" />

    <!-- 评论的回复列表 -->
    <article-comment :source="comment.com_id" type="c"/>
    <!-- /评论的回复列表 -->

    <!-- 底部 -->
        <!-- 发布评论 -->
    <van-cell-group class="publish-wrap">
      <van-field placeholder="请输入评论内容" v-model="msg">
        <van-button slot="button" size="mini" type="info" @click="onCom">发布</van-button>
      </van-field>
    </van-cell-group>
    <!-- /底部 -->
  </div>
</template>

<script>
import CommentItem from './comment-item'
import ArticleComment from './article-comment'
import { addComment } from '@/api/comment'
export default {
  name: 'CommentReply',
  components: {
    CommentItem,
    ArticleComment
  },
  inject: ['articleId'],
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      msg: '',
      responsePl: {}
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    async onCom () {
      try {
        await addComment({
          target: this.comment.com_id.toString(),
          content: this.msg,
          art_id: this.articleId ? this.articleId.toString() : this.articleId
        })
        // console.log(data)
        this.msg = ''
        this.$toast.success('发布成功')
      } catch (error) {
        this.$toast.fail('评论失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
</style>
